<template>
  <div
    class="flex w-full h-screen bg-[url('@/assets/dataScreen/bg.png')] p-5 bg-cover bg-center"
    v-if="datas"
  >
    <!-- 左 -->
    <div
      class="flex-1 h-full mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col rounded text-white"
    >
      <!-- 横向柱状图 -->
      <Horizontabar class="h-1/3 box-border pb-4" :datas="datas.option1" />
      <!-- 雷达图 -->
      <RadarBar class="h-1/3 box-border pb-4" :datas="datas.option3" />
      <!-- 关系图 -->
      <Relation class="h-1/3" />
    </div>
    <!-- 中 -->
    <div class="w-1/2 mr-5 flex flex-col text-white">
      <!-- 数据展示 -->
      <TotalData class="bg-opacity-50 bg-slate-800 p-3 rounded" />
      <!-- 地图可视化 -->
      <MapChart class="bg-opacity-50 bg-slate-800 p-3 mt-4 flex-1 rounded" />
    </div>
    <!-- 右 -->
    <div
      class="flex-1 h-full bg-opacity-50 bg-slate-800 p-3 flex flex-col rounded text-white"
    >
      <!-- 竖向柱状图 -->
      <VerticalBar class="h-1/3 box-border pb-4" :datas="datas.option2" />
      <!-- 环形图 -->
      <RingBar class="h-1/3 box-border pb-4" />
      <!-- 文档云图 -->
      <Wordcloud class="h-1/3" />
    </div>
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref } from "vue";
import { getData } from "@/api/DataScreen/index.ts";
import Horizontabar from "./components/Horizontabar.vue";
import RadarBar from "./components/RadarBar.vue";
import Relation from "./components/Relation.vue";
import TotalData from "./components/TotalData.vue";
import MapChart from "./components/MapChart.vue";
import VerticalBar from "./components/VerticalBar.vue";
import RingBar from "./components/RingBar.vue";
import Wordcloud from "./components/Wordcloud.vue";

const datas = ref(null);
const loadData = async () => {
  const { data } = await getData();
  if (data.code != 200) return ElMessage.warning(data.message);
  datas.value = data.data;
  console.log(datas.value);
};
loadData();

setInterval(() => {
  loadData();
}, 3000);
</script>

<style lang="scss" scoped></style>
